<template>
<div class="pasuser">
    <Form ref="form" :model="formInline" :rules="ruleInline" :label-width="70">
        <FormItem label="手机号码" prop="phoneNum">
            <Input v-model="formInline.phoneNum" placeholder="请输入手机号码"></Input>
        </FormItem>
        <FormItem label="验证码" prop="vcode">
            <div class="vcode">
                <Input v-model="formInline.vcode" placeholder="请输入验证码"></Input>
                <span class="vcode-title"></span>
                <span class="vcodeclick" >换一张</span>
            </div>
        </FormItem>
        <FormItem>
            <Button style="width: 100%;" type="primary" size="large" @click="handleSubmit()">下一步</Button>
        </FormItem>
    </Form>
</div>
</template>

<script>
var phoneReg = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;

export default {
    name: 'PasFirst',
    // props: ['data'],
    data() {
        return {
            formInline: {
                phoneNum: '',
                vcode: ''
            },
            ruleInline: {
                phoneNum: [{

                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    },
                    {

                        pattern: phoneReg,
                        message: '请输入正确的手机号格式',
                        trigger: 'blur'
                    }
                ],
            }

        }
    },
    methods: {
        handleSubmit() {
            // 验证手机号是否为空
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.$emit('on-submit', this.formInline);
                } else {
                    this.$Message.error('表单验证失败!');
                }
            })

        }
    },
}
</script>

<style lang="less" scoped>
.pasuser {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: -moz-flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 133px;
}

.ivu-input-wrapper {
    width: 360px;
}

.vcode {
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: -moz-flex;

    .ivu-input-wrapper {
        width: 184px;
    }

    .vcode-title {
        display: inline-block;
        width: 110px;
        height: 32px;
        border: 1px solid #AEC0DA;
        text-align: center;
        line-height: 32px;
        margin: 0 15px;
    }

    .vcodeclick {
        color: #398BEF;
        cursor: pointer;
    }
}

.ivu-btn-primary {
    background-color: #D92410;
    border-color: #D92410;
}

.ivu-form-item {
    margin-bottom: 40px;
}
</style>
